{{- $self := . -}}
{{- .page_scratch.Add "js" (dict "file" "syna-graph.js") -}}
{{- $bg := .self.Scratch.Get "bg" }}

{{- partial "helpers/container.html" (dict "start" true "in_slot" .in_slot "bg" $bg "id" .id "Params" .Params) -}}
  {{- partial "helpers/section-header.html" (dict "self" $self "bg" $bg "params" .Params) }}
  <div class="row chart-container position-relative" style="
    {{- (cond (isset .Params "width") (printf "width: %s;" .Params.width) (print "width: 100%;")) | safeCSS -}}
    {{- (cond (isset .Params "height") (printf "height: %s;" .Params.height) (print "height: 400px;")) | safeCSS -}}
  ">
    <canvas id="{{ printf "chart-%s" .Name }}" width="400" height="400"></canvas>
  </div>
{{- partial "helpers/container.html" (dict "end" true "in_slot" .in_slot) -}}
{{- if .page.File.Dir -}}
  <script>
    var fragmentName = "{{ .Name }}";
    window.syna.api.register('graph', 'graph-' + fragmentName, {
      selector: "{{ printf "#chart-%s" .Name }}",
      config: JSON.parse({{ readFile (printf "%s%s/config.json" .page.File.Dir .Name) | safeHTML }}),
    });
  </script>
{{- end -}}
